<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 实现页面的基本布局 -->
      <el-card class="tree-card">
        <!-- 使用组件 -->
        <TreeTools :tree-node="company" :is-root="true" @addDepts="addDepartments" />
        <!-- 用了一个行列布局 -->
        <!-- 下面就是树形控件内容了 -->
        <el-tree :data="departs" :props="defaultProps" :default-expand-all="true">
          <!-- 传入内容 插槽内容 会循环多次 有多少节点 就循环多少次 -->
          <!-- 作用域插槽 slot-scope="obj" 接收传递给插槽的数据   data 每个节点的数据对象-->
          <TreeTools
            slot-scope="{ data }"
            :tree-node="data"
            @delDepts="getDepartments"
            @addDepts="addDepartments"
            @editDepts="editDepartments"
          />
        </el-tree>
      </el-card>
    </div>
    <!-- 添加部门组件 -->
    <AddDept ref="addDept" :show-dialog="dialogShow" :tree-node="node" @addDepts="getDepartments" @closeDialog="dialogShow=false" />
    <!-- 把点击的部门信息传给子组件 -->
  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import AddDept from './components/add-dept.vue'
// 引入方法
import { getDepartments } from '@/api/departments'
// 引入处理数据的方法
import { tranListToTreeData } from '@/utils/index'
export default {
  name: 'Departments',
  components: { TreeTools, AddDept },
  data() {
    return {
      company: {}, // 公司名称
      defaultProps: {
        label: 'name'
      },
      departs: [
      ], // 部门信息
      // 定义添加弹框的现实与影藏
      dialogShow: false,
      node: null // 点击的部门信息
    }
  },
  created() {
    // 页面一刷新调用请求方法
    this.getDepartments()
  },
  methods: {
    // 定义请求方法
    async getDepartments() {
      const result = await getDepartments()
      console.log(result)
      this.company = { name: result.companyName, manager: '负责人', id: '' }
      // 需要对数据进行改动
      this.departs = tranListToTreeData(result.depts, '')
    },
    // 自定义打开弹框事件
    addDepartments(node) {
      // 显示弹窗 记录当前点击的部门
      this.node = node
      console.log(node)
      this.dialogShow = true
    },
    // 编辑是触发子组件的自定义事件
    editDepartments(node) {
      this.node = node
      // 打开弹层
      this.dialogShow = true
      // 调用方法子组件的方法
      this.$refs.addDept.getDepartDetail(node.id)
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>

